@()(implicit request: play.api.mvc.RequestHeader)
@main("Statistics") {

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			.myH4 {
				margin-top: 20px;
			}

			.table-hover > tbody > tr > td, .table-hover > tbody > tr > th {
				background-color: white;
			}

			.affix {
				top: 20px;
			}

			.bold {
				font-weight: bold;
			}

			th {
				background-color: white;
			}

			.row {
				background-color: white;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Overview of RJunBase</h2>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-3" id="myScrollspy">
			<div class="bs-docs-sidebar affix-top" role="complementary">
				<ul class="nav bs-docs-sidenav" id="myNav">
					<li class=""><a href="#1">1. Sample summary</a></li>
					<li><a href="#2">2. Distribution of linear splice and fusion junctions from TCGA</a></li>
					<li><a href="#3">3. Distribution of linear splice junctions from GTEx</a></li>
					<li><a href="#4">4. Distribution of back-splice junctions from MiOncoCirc</a></li>
				</ul>
			</div>
		</div>
		<div class="col-xs-9" style="line-height: 2em">

			<div class="row" id="1">
				<div class="col-xs-12">
					<p class="paragraph bold">
						1.Sample summary
					</p>
					<p class="paragraph">
				<div class="row" style="">
					<div class="col-sm-12" align="center">
						<img class="myImg" src="@routes.Assets.at("images/sample.summary1.png")" style="width: 100%">

					</div>
					<div class="col-sm-12" align="center">
						<img class="myImg" src="@routes.Assets.at("images/sample.summary.GTEx.png")" style="width: 100%">
					</div>
					<div class="col-sm-12" style="" align="center">
						<img class="myImg" src="@routes.Assets.at("images/sample.summary3.png")" style="width: 100%">
					</div>

				</div>
					</p>

				</div>
			</div>

			<div class="row" id="2">
				<div class="col-xs-12">
					<p class="paragraph bold">
						2.Distribution of linear splice and fusion junctions from TCGA
					</p>
					<p class="paragraph">
				<div class="row">
					<div class="col-sm-12">
						<table class="display table table-bordered" id="table" data-pagination="true"
						data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" data-multiple-search="true"
						style="word-wrap: break-word;">
							<thead>

							</thead>
						</table>

					</div>

				</div>

					</p>
				</div>
			</div>

			<div class="row" id="3">
				<div class="col-xs-12">
					<p class="paragraph bold">
						3.Distribution of linear splice junctions from GTEx
					</p>
					<p class="paragraph">
				<div class="row">
					<div id="gtex">
						<table class="display table table-bordered" id="table" data-pagination="true"
						data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" data-multiple-search="true"
						style="word-wrap: break-word;">
							<thead>

							</thead>
						</table>

					</div>

				</div>

					</p>
				</div>
			</div>

			<div class="row" id="4">
				<div class="col-xs-12">
					<p class="paragraph bold">
						4.Distribution of back-splice junctions from MiOncoCirc
					</p>
					<p class="paragraph">
				<div id="bs">
					<table class="display table table-bordered" id="table" data-pagination="true"
					data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" data-multiple-search="true"
					style="word-wrap: break-word;">
						<thead>

						</thead>
					</table>
				</div>
					</p>

				</div>
			</div>

		</div>
	</div>

	<script>
			$(function () {
				Statistic.init

				$('body').scrollspy({target: '#myScrollspy'})

				$("#myNav").affix({
					offset: {
						top: 100
					}
				});

			})
	</script>


}
